ರಿಯಾಕ್ಟ್ ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್‌ನೊಂದಿಗೆ ವೇಗವಾದ ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ. ಈ ಆಳವಾದ ಮಾರ್ಗದರ್ಶಿ ಕಾಂಪೊನೆಂಟ್-ಲೆವೆಲ್ ಹೈಡ್ರೇಷನ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಬಳಕೆದಾರರ ಅನುಭವಕ್ಕೆ ಅದರ ಪ್ರಯೋಜನಗಳು ಮತ್ತು ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಪ್ರಾಯೋಗಿಕ ಅನುಷ್ಠಾನ ತಂತ್ರಗಳನ್ನು ವಿವರಿಸುತ್ತದೆ.
ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು: ರಿಯಾಕ್ಟ್ ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್‌ನ ಆಳವಾದ ಅಧ್ಯಯನ
ಆಧುನಿಕ ಡಿಜಿಟಲ್ ಲ್ಯಾಂಡ್‌ಸ್ಕೇಪ್‌ನಲ್ಲಿ, ವೇಗವು ಕೇವಲ ಒಂದು ವೈಶಿಷ್ಟ್ಯವಲ್ಲ; ಇದು ಸಕಾರಾತ್ಮಕ ಬಳಕೆದಾರರ ಅನುಭವದ ಅಡಿಪಾಯವಾಗಿದೆ. ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ, ಬಳಕೆದಾರರು ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಸಾಧನಗಳು ಮತ್ತು ನೆಟ್‌ವರ್ಕ್ ಪರಿಸ್ಥಿತಿಗಳಲ್ಲಿ ವಿಷಯವನ್ನು ಪ್ರವೇಶಿಸುವಲ್ಲಿ, ಕಾರ್ಯಕ್ಷಮತೆ ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿದೆ. ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುವ ಸೈಟ್ ಬಳಕೆದಾರರ ನಿರಾಶೆಗೆ, ಹೆಚ್ಚಿನ ಬೌನ್ಸ್ ದರಗಳಿಗೆ ಮತ್ತು ಕಳೆದುಕೊಂಡ ಆದಾಯಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು. ವರ್ಷಗಳವರೆಗೆ, ಡೆವಲಪರ್‌ಗಳು ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯವನ್ನು ಸುಧಾರಿಸಲು ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ (SSR) ಅನ್ನು ಬಳಸಿದ್ದಾರೆ, ಆದರೆ ಇದು ಒಂದು ಗಮನಾರ್ಹವಾದ ಟ್ರೇಡ್-ಆಫ್‌ನೊಂದಿಗೆ ಬಂದಿತು: ಸಂಪೂರ್ಣ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಂಡಲ್ ಡೌನ್‌ಲೋಡ್ ಆಗುವವರೆಗೆ ಮತ್ತು ಕಾರ್ಯಗತಗೊಳ್ಳುವವರೆಗೆ ಇಂಟರಾಕ್ಟಿವ್ ಅಲ್ಲದ ಪುಟ. ಇಲ್ಲಿಯೇ ರಿಯಾಕ್ಟ್ 18 ಕ್ರಾಂತಿಕಾರಿ ಪರಿಕಲ್ಪನೆಯನ್ನು ಪರಿಚಯಿಸಿತು: ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್.
ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್‌ನ ಸೂಕ್ಷ್ಮ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತದೆ. ನಾವು ವೆಬ್ ರೆಂಡರಿಂಗ್‌ನ ಮೂಲಭೂತ ಅಂಶಗಳಿಂದ ರಿಯಾಕ್ಟ್‌ನ ಕಂಕರಂಟ್ ವೈಶಿಷ್ಟ್ಯಗಳ ಸುಧಾರಿತ ಯಂತ್ರಶಾಸ್ತ್ರದವರೆಗೆ ಪ್ರಯಾಣಿಸುತ್ತೇವೆ. ನೀವು ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್ ಏನು ಎಂಬುದನ್ನು ಮಾತ್ರವಲ್ಲದೆ, ಅದು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಏಕೆ ಇದು ಪ್ರಮುಖ ವೆಬ್ ವೈಟಲ್ಸ್‌ಗೆ ಗೇಮ್-ಚೇಂಜರ್ ಆಗಿದೆ ಮತ್ತು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ವೇಗವಾದ, ಹೆಚ್ಚು ಸ್ಥಿತಿಸ್ಥಾಪಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಿಮ್ಮ ಸ್ವಂತ ಯೋಜನೆಗಳಲ್ಲಿ ನೀವು ಅದನ್ನು ಹೇಗೆ ಅಳವಡಿಸಬಹುದು ಎಂಬುದನ್ನು ಕಲಿಯುವಿರಿ.
ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ರೆಂಡರಿಂಗ್‌ನ ವಿಕಸನ: CSR ನಿಂದ SSR ಮತ್ತು ಅದರಾಚೆಗೆ
ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್‌ನ ನಾವೀನ್ಯತೆಯನ್ನು ನಿಜವಾಗಿ ಮೆಚ್ಚಿಕೊಳ್ಳಲು, ನಾವು ಮೊದಲು ನಮ್ಮನ್ನು ಇಲ್ಲಿಗೆ ತಂದ ಮಾರ್ಗವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕು. ನಾವು ವೆಬ್ ಪುಟಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುವ ವಿಧಾನವು ಗಣನೀಯವಾಗಿ ವಿಕಸನಗೊಂಡಿದೆ, ಪ್ರತಿಯೊಂದು ಹಂತವು ಹಿಂದಿನದರ ಮಿತಿಗಳನ್ನು ಪರಿಹರಿಸುವ ಗುರಿಯನ್ನು ಹೊಂದಿದೆ.
ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ (CSR): SPA ಯ ಏರಿಕೆ
ರಿಯಾಕ್ಟ್‌ನಂತಹ ಲೈಬ್ರರಿಗಳೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾದ ಸಿಂಗಲ್ ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ (SPAs) ಆರಂಭಿಕ ದಿನಗಳಲ್ಲಿ, ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ ಮಾನದಂಡವಾಗಿತ್ತು. ಪ್ರಕ್ರಿಯೆಯು ನೇರವಾಗಿದೆ:
- ಸರ್ವರ್ ಕನಿಷ್ಠ HTML ಫೈಲ್ ಅನ್ನು ಕಳುಹಿಸುತ್ತದೆ, ಸಾಮಾನ್ಯವಾಗಿ ಕೇವಲ ಒಂದು `` ಅಂಶ, ಮತ್ತು ದೊಡ್ಡ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳಿಗೆ ಲಿಂಕ್‌ಗಳನ್ನು ಕಳುಹಿಸುತ್ತದೆ.
- ಬ್ರೌಸರ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡುತ್ತದೆ.
- ರಿಯಾಕ್ಟ್ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ, ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ ಮತ್ತು DOM ಅನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ, ಪುಟವನ್ನು ಗೋಚರಿಸುವಂತೆ ಮತ್ತು ಇಂಟರಾಕ್ಟಿವ್ ಆಗಿ ಮಾಡುತ್ತದೆ.
ಲಾಭಗಳು: CSR ಆರಂಭಿಕ ಲೋಡ್ ನಂತರ ಹೆಚ್ಚು ಇಂಟರಾಕ್ಟಿವ್, ಅಪ್ಲಿಕೇಶನ್-ರೀತಿಯ ಅನುಭವಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ಪುಟಗಳ ನಡುವಿನ ಪರಿವರ್ತನೆಗಳು ವೇಗವಾಗಿರುತ್ತವೆ ಏಕೆಂದರೆ ಪೂರ್ಣ-ಪುಟ ಮರುಲೋಡ್‌ಗಳು ಅಗತ್ಯವಿಲ್ಲ.
ನಷ್ಟಗಳು: ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯವು ನೋವಿನಿಂದ ಕೂಡಿರಬಹುದು. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೌನ್‌ಲೋಡ್, ಪಾರ್ಸ್ ಮತ್ತು ಕಾರ್ಯಗತಗೊಳ್ಳುವವರೆಗೆ ಬಳಕೆದಾರರು ಖಾಲಿ ಬಿಳಿ ಪರದೆಯನ್ನು ನೋಡುತ್ತಾರೆ. ಇದು ಕಳಪೆ ಫಸ್ಟ್ ಕಂಟೆಂಟ್‌ಫುಲ್ ಪೇಂಟ್ (FCP) ಗೆ ಕಾರಣವಾಗುತ್ತದೆ ಮತ್ತು ಸರ್ಚ್ ಎಂಜಿನ್ ಆಪ್ಟಿಮೈzation (SEO) ಗೆ ಹಾನಿಕಾರಕವಾಗಿದೆ, ಏಕೆಂದರೆ ಸರ್ಚ್ ಎಂಜಿನ್ ಕ್ರಾಲರ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಖಾಲಿ ಪುಟವನ್ನು ನೋಡುತ್ತಾರೆ.ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ (SSR): ವೇಗ ಮತ್ತು SEO ಸಹಾಯಕ್ಕೆ
CSR ನ ಪ್ರಮುಖ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸಲು SSR ಅನ್ನು ಪರಿಚಯಿಸಲಾಯಿತು. SSR ನೊಂದಿಗೆ, ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಸರ್ವರ್‌ನಲ್ಲಿ HTML ಸ್ಟ್ರಿಂಗ್ ಆಗಿ ರೆಂಡರ್ ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಸಂಪೂರ್ಣ ರೂಪುಗೊಂಡ HTML ಅನ್ನು ನಂತರ ಬ್ರೌಸರ್‌ಗೆ ಕಳುಹಿಸಲಾಗುತ್ತದೆ.
- ಬ್ರೌಸರ್ HTML ಅನ್ನು ತಕ್ಷಣವೇ ಸ್ವೀಕರಿಸುತ್ತದೆ ಮತ್ತು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ, ಆದ್ದರಿಂದ ಬಳಕೆದಾರರು ವಿಷಯವನ್ನು ತಕ್ಷಣವೇ ನೋಡುತ್ತಾರೆ (ಉತ್ತಮ FCP).
- ಸರ್ಚ್ ಎಂಜಿನ್ ಕ್ರಾಲರ್‌ಗಳು ವಿಷಯವನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಇಂಡೆಕ್ಸ್ ಮಾಡಬಹುದು, SEO ಅನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.
- ಹಿನ್ನೆಲೆಯಲ್ಲಿ, ಅದೇ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಂಡಲ್ ಡೌನ್‌ಲೋಡ್ ಆಗುತ್ತದೆ.
- ಡೌನ್‌ಲೋಡ್ ಆದ ನಂತರ, ರಿಯಾಕ್ಟ್ ಕ್ಲೈಂಟ್‌ನಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಸರ್ವರ್-ರೆಂಡರ್ಡ್ HTML ಗೆ ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳು ಮತ್ತು ಸ್ಥಿತಿಯನ್ನು ಲಗತ್ತಿಸುತ್ತದೆ. ಈ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಹೈಡ್ರೇಷನ್ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ.
ಸಾ The "ಅನ್ಕ್ಯಾನಿ ವ್ಯಾಲಿ" ಆಫ್ ಟ್ರೆಡಿಷನಲ್ SSR
SSR ಖಾಲಿ ಪರದೆಯ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಿದರೂ, ಅದು ಹೊಸ, ಹೆಚ್ಚು ಸೂಕ್ಷ್ಮ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಚಯಿಸಿತು. ಪುಟವು *ಇಂಟರಾಕ್ಟಿವ್ ಆಗುವುದಕ್ಕಿಂತ ಬಹಳ ಹಿಂದೆಯೇ ಇಂಟರಾಕ್ಟಿವ್ ಆಗಿ *ಕಾಣುತ್ತದೆ. ಇದು "ಅನ್ಕ್ಯಾನಿ ವ್ಯಾಲಿ" ಅನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ, ಅಲ್ಲಿ ಬಳಕೆದಾರರು ಬಟನ್ ಅನ್ನು ನೋಡುತ್ತಾರೆ, ಅದನ್ನು ಕ್ಲಿಕ್ ಮಾಡುತ್ತಾರೆ ಮತ್ತು ಏನೂ ಆಗುವುದಿಲ್ಲ. ಏಕೆಂದರೆ ಆ ಬಟನ್ ಅನ್ನು ಕಾರ್ಯನಿರ್ವಹಿಸುವಂತೆ ಮಾಡಲು ಅಗತ್ಯವಿರುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇನ್ನೂ ಸಂಪೂರ್ಣ ಪುಟವನ್ನು ಹೈಡ್ರೇಟ್ ಮಾಡುವ ತನ್ನ ಕೆಲಸವನ್ನು ಪೂರ್ಣಗೊಳಿಸಿಲ್ಲ.
ಈ ನಿರಾಶೆಯು ಮೊನೊಲಿಥಿಕ್ ಹೈಡ್ರೇಷನ್ ನಿಂದ ಉಂಟಾಗುತ್ತದೆ. ರಿಯಾಕ್ಟ್ 18 ರ ಹಿಂದಿನ ಆವೃತ್ತಿಗಳಲ್ಲಿ, ಹೈಡ್ರೇಷನ್ ಒಂದು ಆಲ್-ಆರ್-ನಥಿಂಗ್ ವ್ಯವಹಾರವಾಗಿತ್ತು. ಸಂಪೂರ್ಣ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಒಂದೇ ಪಾಸ್‌ನಲ್ಲಿ ಹೈಡ್ರೇಟ್ ಮಾಡಬೇಕಾಗಿತ್ತು. ನಿಮ್ಮಲ್ಲಿ ಅತಿ ನಿಧಾನವಾದ ಕಾಂಪೊನೆಂಟ್ (ಬಹುಶಃ ಸಂಕೀರ್ಣ ಚಾರ್ಟ್ ಅಥವಾ ಭಾರವಾದ ಮೂರನೇ ವ್ಯಕ್ತಿಯ ವಿಜೆಟ್) ಇದ್ದರೆ, ಅದು ಸಂಪೂರ್ಣ ಪುಟದ ಹೈಡ್ರೇಷನ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತದೆ. ನಿಮ್ಮ ಹೆಡರ್, ಸೈಡ್‌ಬಾರ್ ಮತ್ತು ಮುಖ್ಯ ವಿಷಯವು ಸರಳವಾಗಿರಬಹುದು, ಆದರೆ ನಿಧಾನವಾದ ಕಾಂಪೊನೆಂಟ್ ಸಿದ್ಧವಾಗುವವರೆಗೆ ಅವು ಇಂಟರಾಕ್ಟಿವ್ ಆಗಲು ಸಾಧ್ಯವಿಲ್ಲ. ಇದು ಆಗಾಗ್ಗೆ ಕಳಪೆ ಟೈಮ್ ಟು ಇಂಟರಾಕ್ಟಿವ್ (TTI) ಗೆ ಕಾರಣವಾಗುತ್ತದೆ, ಇದು ಬಳಕೆದಾರರ ಅನುಭವಕ್ಕೆ ನಿರ್ಣಾಯಕ ಅಳತೆಯಾಗಿದೆ.
ಹೈಡ್ರೇಷನ್ ಎಂದರೇನು? ಕೋರ್ ಪರಿಕಲ್ಪನೆಯನ್ನು ಅನ್ಪ್ಯಾಕ್ ಮಾಡಲಾಗುತ್ತಿದೆ
ಹೈಡ್ರೇಷನ್ ಬಗ್ಗೆ ನಮ್ಮ ತಿಳುವಳಿಕೆಯನ್ನು ಪರಿಷ್ಕರಿಸೋಣ. ಚಲನಚಿತ್ರ ಸೆಟ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಸರ್ವರ್ ಸ್ಥಿರ ಸೆಟ್ ಅನ್ನು (HTML) ನಿರ್ಮಿಸುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ನಿಮಗೆ ಕಳುಹಿಸುತ್ತದೆ. ಇದು ನಿಜವಾಗಿ ಕಾಣುತ್ತದೆ, ಆದರೆ ನಟರು (ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್) ಇನ್ನೂ ಬಂದಿಲ್ಲ. ಹೈಡ್ರೇಷನ್ ಎಂದರೆ ನಟರು ಸೆಟ್‌ಗೆ ಬಂದು, ತಮ್ಮ ಸ್ಥಾನಗಳನ್ನು ಪಡೆದುಕೊಂಡು, ಕ್ರಿಯೆ ಮತ್ತು ಸಂಭಾಷಣೆಯೊಂದಿಗೆ (ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳು ಮತ್ತು ಸ್ಥಿತಿ) ದೃಶ್ಯವನ್ನು ಜೀವಂತಗೊಳಿಸುವ ಪ್ರಕ್ರಿಯೆ.
ಸಾ The `ಹೈಡ್ರೇಷನ್` ನಲ್ಲಿ, ನಿರ್ದೇಶಕರು "ಆಕ್ಷನ್!" ಎಂದು ಕೂಗುವ ಮೊದಲು ಮುಖ್ಯ ನಟನಿಂದ ಹಿಡಿದು ಹಿನ್ನೆಲೆ ಎಕ್ಸ್‌ಟ್ರಾ ವರೆಗೆ ಪ್ರತಿ ನಟನು ತನ್ನ ಸ್ಥಾನದಲ್ಲಿರಬೇಕಾಗಿತ್ತು. ಒಬ್ಬ ನಟ ಟ್ರಾಫಿಕ್‌ನಲ್ಲಿ ಸಿಲುಕಿಕೊಂಡರೆ, ಸಂಪೂರ್ಣ ನಿರ್ಮಾಣ ಸ್ಥಗಿತಗೊಳ್ಳುತ್ತದೆ. ಇದು ನಿಖರವಾಗಿ ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್ ಪರಿಹರಿಸುವ ಸಮಸ್ಯೆ.
ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್ ಪರಿಚಯ: ಗೇಮ್-ಚೇಂಜರ್
ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್, ಸ್ಟ್ರೀಮಿಂಗ್ SSR ಅನ್ನು ಬಳಸುವಾಗ ರಿಯಾಕ್ಟ್ 18 ರಲ್ಲಿ ಡೀಫಾಲ್ಟ್ ನಡವಳಿಕೆ, ಮೊನೊಲಿಥಿಕ್ ಮಾದರಿಯಿಂದ ಮುಕ್ತವಾಗುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ತುಣುಕುಗಳಾಗಿ ಹೈಡ್ರೇಟ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ, ಹೆಚ್ಚು ಮುಖ್ಯವಾದ ಅಥವಾ ಬಳಕೆದಾರರು ಸಂವಹನ ನಡೆಸುತ್ತಿರುವ ಭಾಗಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡುತ್ತದೆ.
ಇದು ಮೂಲಭೂತವಾಗಿ ಆಟವನ್ನು ಹೇಗೆ ಬದಲಾಯಿಸುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:
- ನೋನ್-ಬ್ಲಾಕಿಂಗ್ ಹೈಡ್ರೇಷನ್: ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಹೈಡ್ರೇಟ್ ಮಾಡಲು ಇನ್ನೂ ಸಿದ್ಧವಾಗಿಲ್ಲದಿದ್ದರೆ (ಉದಾಹರಣೆಗೆ, ಅದರ ಕೋಡ್ `React.lazy` ಮೂಲಕ ಲೋಡ್ ಆಗಬೇಕು), ಅದು ಇನ್ನು ಮುಂದೆ ಪುಟದ ಉಳಿದ ಭಾಗವನ್ನು ನಿರ್ಬಂಧಿಸುವುದಿಲ್ಲ. ರಿಯಾಕ್ಟ್ ಅದನ್ನು ಬಿಟ್ಟುಬಿಡುತ್ತದೆ ಮತ್ತು ಲಭ್ಯವಿರುವ ಮುಂದಿನ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಹೈಡ್ರೇಟ್ ಮಾಡುತ್ತದೆ.
- ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ HTML ಸ್ಟ್ರೀಮಿಂಗ್: ಸರ್ವರ್‌ನಲ್ಲಿ ನಿಧಾನವಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಾಗಿ ಕಾಯುವ ಬದಲು, ರಿಯಾಕ್ಟ್ ಅದರ ಬದಲಿಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್ (ಸ್ಪಿನರ್‌ನಂತಹ) ಕಳುಹಿಸಬಹುದು. ನಿಧಾನವಾದ ಕಾಂಪೊನೆಂಟ್ ಸಿದ್ಧವಾದಾಗ, ಅದರ HTML ಕ್ಲೈಂಟ್‌ಗೆ ಸ್ಟ್ರೀಮ್ ಆಗುತ್ತದೆ ಮತ್ತು ಮನಬಂದಂತೆ ಬದಲಾಯಿಸಲಾಗುತ್ತದೆ.
- ಬಳಕೆದಾರ-ಆದ್ಯತೆಯ ಹೈಡ್ರೇಷನ್: ಇದು ಅತ್ಯಂತ ಅದ್ಭುತವಾದ ಭಾಗವಾಗಿದೆ. ಬಳಕೆದಾರರು ಹೈಡ್ರೇಟ್ ಆಗುವ ಮೊದಲು ಕಾಂಪೊನೆಂಟ್‌ನೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಿದರೆ (ಉದಾ., ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದರೆ), ರಿಯಾಕ್ಟ್ ಆ ನಿರ್ದಿಷ್ಟ ಕಾಂಪೊನೆಂಟ್ ಮತ್ತು ಅದರ ಪೋಷಕರನ್ನು ಹೈಡ್ರೇಟ್ ಮಾಡಲು ಆದ್ಯತೆ ನೀಡುತ್ತದೆ. ಇದು ಈವೆಂಟ್ ಅನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಹೈಡ್ರೇಷನ್ ಪೂರ್ಣಗೊಂಡ ನಂತರ ಅದನ್ನು ಮರು-ಪ್ಲೇ ಮಾಡುತ್ತದೆ, ಅಪ್ಲಿಕೇಶನ್ ತಕ್ಷಣವೇ ಪ್ರತಿಕ್ರಿಯಿಸುವಂತೆ ಮಾಡುತ್ತದೆ.
ನಮ್ಮ ಸ್ಟೋರ್ ಹೋಲಿಕೆಯನ್ನು ಮರು-ಪರಿಶೀಲಿಸೋಣ: ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್‌ನೊಂದಿಗೆ, ಗ್ರಾಹಕರು ಚೆಕ್ ಔಟ್ ಮಾಡಬಹುದು ಮತ್ತು ಅವರು ಸಿದ್ಧವಾದ ತಕ್ಷಣ ನಿರ್ಗಮಿಸಬಹುದು. ಇನ್ನೂ ಉತ್ತಮ, ಅವಸರದಲ್ಲಿರುವ ಗ್ರಾಹಕರು ಚೆಕ್‌ಔಟ್‌ಗೆ ಹತ್ತಿರದಲ್ಲಿದ್ದರೆ, ಸ್ಟೋರ್ ಮ್ಯಾನೇಜರ್ (ರಿಯಾಕ್ಟ್) ಅವರಿಗೆ ಆದ್ಯತೆ ನೀಡಬಹುದು, ಅವರನ್ನು ಸಾಲಿನಲ್ಲಿ ಮುಂದೆ ಹೋಗಲು ಅನುಮತಿಸಬಹುದು. ಈ ಬಳಕೆದಾರ-ಕೇಂದ್ರಿತ ವಿಧಾನವು ಅನುಭವವನ್ನು ಎಷ್ಟು ವೇಗವಾಗಿ ಮಾಡುತ್ತದೆ.
ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್‌ನ ಸ್ತಂಭಗಳು: ಸಸ್ಪೆನ್ಸ್ ಮತ್ತು ಕಂಕರಂಟ್ ರೆಂಡರಿಂಗ್
ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್ ಮಾಯಾಜಾಲವಲ್ಲ; ಇದು ರಿಯಾಕ್ಟ್‌ನ ಎರಡು ಶಕ್ತಿಯುತ, ಪರಸ್ಪರ ಸಂಬಂಧಿತ ವೈಶಿಷ್ಟ್ಯಗಳ ಫಲಿತಾಂಶವಾಗಿದೆ: ಸರ್ವರ್-ಸೈಡ್ ಸಸ್ಪೆನ್ಸ್ ಮತ್ತು ಕಂಕರಂಟ್ ರೆಂಡರಿಂಗ್.
ಸರ್ವರ್‌ನಲ್ಲಿ ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್ ಅನ್ನು ಅರ್ಥೈಸಿಕೊಳ್ಳುವುದು
ನೀವು `React.lazy` ನೊಂದಿಗೆ ಕೋಡ್-ವಿಭಜನೆಗಾಗಿ ಕ್ಲೈಂಟ್‌ನಲ್ಲಿ `
` ಅನ್ನು ಬಳಸುವುದರೊಂದಿಗೆ ಪರಿಚಿತರಾಗಿರಬಹುದು. ಸರ್ವರ್‌ನಲ್ಲಿ, ಇದು ಇದೇ ರೀತಿಯ ಆದರೆ ಹೆಚ್ಚು ಶಕ್ತಿಯುತವಾದ ಪಾತ್ರವನ್ನು ವಹಿಸುತ್ತದೆ. ನೀವು ` ` ಗಡಿರೇಖೆಯಲ್ಲಿ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಸುತ್ತುವರಿದಾಗ, ನೀವು ರಿಯಾಕ್ಟ್‌ಗೆ ಹೇಳುತ್ತಿದ್ದೀರಿ: "ಈ UI ಭಾಗವು ತಕ್ಷಣವೇ ಸಿದ್ಧವಾಗಿರದಿರಬಹುದು. ನಿರೀಕ್ಷಿಸಬೇಡಿ. ಈಗ ಫಾಲ್‌ಬ್ಯಾಕ್ ಕಳುಹಿಸಿ ಮತ್ತು ಅದು ಸಿದ್ಧವಾದಾಗ ನಿಜವಾದ ವಿಷಯವನ್ನು ಸ್ಟ್ರೀಮ್ ಮಾಡಿ." ಉತ್ಪನ್ನ ವಿವರಗಳ ವಿಭಾಗ ಮತ್ತು ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಕಾಮೆಂಟ್‌ಗಳ ವಿಜೆಟ್ ಅನ್ನು ಒಳಗೊಂಡಿರುವ ಪುಟವನ್ನು ಪರಿಗಣಿಸಿ. ಕಾಮೆಂಟ್‌ಗಳ ವಿಜೆಟ್ ಆಗಾಗ್ಗೆ ಮೂರನೇ ವ್ಯಕ್ತಿಯ API ಯನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ ಮತ್ತು ನಿಧಾನವಾಗಿರಬಹುದು.
```jsx // ಮೊದಲು: ಸರ್ವರ್ fetchComments() ಅನ್ನು ಪರಿಹರಿಸಲು ಕಾಯುತ್ತದೆ, ಸಂಪೂರ್ಣ ಪುಟವನ್ನು ವಿಳಂಬಗೊಳಿಸುತ್ತದೆ. function ProductPage({ productId }) { const comments = fetchComments(productId); return ( <>); } // ನಂತರ: Suspense ನೊಂದಿಗೆ, ಸರ್ವರ್ ProductDetails ಅನ್ನು ತಕ್ಷಣವೇ ಕಳುಹಿಸುತ್ತದೆ. import { Suspense } from 'react'; const Comments = React.lazy(() => import('./Comments.js')); function ProductPage() { return ( <> }> ); } ``` ಈ ಬದಲಾವಣೆಯೊಂದಿಗೆ, ಸರ್ವರ್ `Comments` ಕಾಂಪೊನೆಂಟ್‌ಗಾಗಿ ಕಾಯುವುದಿಲ್ಲ. ಇದು `ProductDetails` ಮತ್ತು `Spinner` ಫಾಲ್‌ಬ್ಯಾಕ್‌ನ HTML ಅನ್ನು ತಕ್ಷಣವೇ ಕಳುಹಿಸುತ್ತದೆ. `Comments` ಕಾಂಪೊನೆಂಟ್‌ಗಾಗಿ ಕೋಡ್ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಕ್ಲೈಂಟ್‌ನಲ್ಲಿ ಲೋಡ್ ಆಗುತ್ತದೆ. ಇದು ಬಂದ ತಕ್ಷಣ, ರಿಯಾಕ್ಟ್ ಅದನ್ನು ಹೈಡ್ರೇಟ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಸ್ಪಿನರ್ ಅನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. ಬಳಕೆದಾರರು ಮುಖ್ಯ ಉತ್ಪನ್ನ ಮಾಹಿತಿಯನ್ನು ಬಹಳ ಬೇಗನೆ ನೋಡಬಹುದು ಮತ್ತು ಅದರೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಬಹುದು.
ಕಂಕರಂಟ್ ರೆಂಡರಿಂಗ್‌ನ ಪಾತ್ರ
ಕಂಕರಂಟ್ ರೆಂಡರಿಂಗ್ ಎಂದರೆ ಇದು ಸಾಧ್ಯವಾಗುವಂತೆ ಮಾಡುವ ಎಂಜಿನ್. ಇದು ರಿಯಾಕ್ಟ್ ಅನ್ನು ಬ್ರೌಸರ್‌ನ ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸದೆ ರೆಂಡರಿಂಗ್ ಕೆಲಸವನ್ನು ವಿರಾಮಗೊಳಿಸಲು, ಪುನರಾರಂಭಿಸಲು ಅಥವಾ ತ್ಯಜಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. UI ನವೀಕರಣಗಳಿಗಾಗಿ ಇದನ್ನು ಅತ್ಯಾಧುನಿಕ ಟಾಸ್ಕ್ ಮ್ಯಾನೇಜರ್ ಎಂದು ಯೋಚಿಸಿ.
ಹೈಡ್ರೇಷನ್ ಸಂದರ್ಭದಲ್ಲಿ, ಕಂಕರನ್ಸಿಯು ರಿಯಾಕ್ಟ್ ಅನ್ನು ಹೀಗೆ ಮಾಡಲು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ:
- ಆರಂಭಿಕ HTML ಮತ್ತು ಸ್ವಲ್ಪ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಂದ ತಕ್ಷಣ ಪುಟವನ್ನು ಹೈಡ್ರೇಟ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಿ.
- ಬಳಕೆದಾರರು ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದರೆ ಹೈಡ್ರೇಷನ್ ಅನ್ನು ವಿರಾಮಗೊಳಿಸಿ.
- ಬಳಕೆದಾರರ ಸಂವಹನಕ್ಕೆ ಆದ್ಯತೆ ನೀಡಿ, ಕ್ಲಿಕ್ ಮಾಡಿದ ಬಟನ್ ಅನ್ನು ಹೈಡ್ರೇಟ್ ಮಾಡಿ ಮತ್ತು ಅದರ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ.
- ಸಂವಹನವನ್ನು ನಿರ್ವಹಿಸಿದ ನಂತರ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಪುಟದ ಉಳಿದ ಭಾಗವನ್ನು ಹೈಡ್ರೇಟ್ ಮಾಡುವುದನ್ನು ಪುನರಾರಂಭಿಸಿ.
ಈ ಅಡಚಣೆ ಕಾರ್ಯವಿಧಾನವು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಇದು ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್ ಅನ್ನು ತಕ್ಷಣವೇ ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಫಸ್ಟ್ ಇನ್‌ಪುಟ್ ಡಿಲೇ (FID) ಮತ್ತು ಹೊಸ, ಹೆಚ್ಚು ಸಮಗ್ರವಾದ ಇಂಟರಾಕ್ಷನ್ ಟು ನೆಕ್ಸ್ಟ್ ಪೇಂಟ್ (INP) ನಂತಹ ಅಳತೆಗಳನ್ನು ನಾಟಕೀಯವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ. ಪುಟವು ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಇನ್ನೂ ಲೋಡ್ ಆಗುತ್ತಿದೆಯಾದರೂ ಮತ್ತು ಹೈಡ್ರೇಟ್ ಆಗುತ್ತಿದ್ದರೂ ಸಹ ಅದು ಎಂದಿಗೂ ಫ್ರೀಜ್ ಆಗುವುದಿಲ್ಲ.
ಪ್ರಾಯೋಗಿಕ ಅನುಷ್ಠಾನ: ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್ ತರುವುದು
ಸಿದ್ಧಾಂತವು ಉತ್ತಮವಾಗಿದೆ, ಆದರೆ ಪ್ರಾಯೋಗಿಕವಾಗಿ ಹೇಳುವುದಾದರೆ. ನಿಮ್ಮ ಸ್ವಂತ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಈ ಶಕ್ತಿಯುತ ವೈಶಿಷ್ಟ್ಯವನ್ನು ನೀವು ಹೇಗೆ ಸಕ್ರಿಯಗೊಳಿಸುತ್ತೀರಿ?
ಪೂರ್ವ-ಆವಶ್ಯಕತೆಗಳು ಮತ್ತು ಸೆಟಪ್
ಮೊದಲಿಗೆ, ನಿಮ್ಮ ಯೋಜನೆಯನ್ನು ಸರಿಯಾಗಿ ಹೊಂದಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ:
- ರಿಯಾಕ್ಟ್ 18 ಗೆ ಅಪ್‌ಗ್ರೇಡ್ ಮಾಡಿ: `react` ಮತ್ತು `react-dom` ಪ್ಯಾಕೇಜ್‌ಗಳು ಎರಡೂ ಆವೃತ್ತಿ 18.0.0 ಅಥವಾ ಹೆಚ್ಚಿನದಾಗಿರಬೇಕು.
- ಕ್ಲೈಂಟ್‌ನಲ್ಲಿ `hydrateRoot` ಬಳಸಿ: ಹಳೆಯ `ReactDOM.hydrate` ಅನ್ನು ಹೊಸ `hydrateRoot` API ಯೊಂದಿಗೆ ಬದಲಾಯಿಸಿ. ಈ ಹೊಸ API ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಕಂಕರಂಟ್ ವೈಶಿಷ್ಟ್ಯಗಳಿಗೆ ಆಪ್ಟ್-ಇನ್ ಮಾಡುತ್ತದೆ.
```jsx
// client/index.js
import { hydrateRoot } from 'react-dom/client';
import App from './App';
const container = document.getElementById('root');
hydrateRoot(container,
); ``` - ಸರ್ವರ್‌ನಲ್ಲಿ ಸ್ಟ್ರೀಮಿಂಗ್ API ಬಳಸಿ: ನೀವು ಸ್ಟ್ರೀಮಿಂಗ್ ರೆಂಡರರ್ ಅನ್ನು ಬಳಸಬೇಕು. Node.js ಪರಿಸರಗಳಾದ Express ಅಥವಾ Next.js ಗಾಗಿ, ಇದು `renderToPipeableStream` ಆಗಿದೆ. ಇತರ ಪರಿಸರಗಳಿಗೆ ಅವುಗಳ ಸ್ವಂತ ಸಮಾನತೆಗಳಿವೆ (ಉದಾ., Deno ಅಥವಾ Cloudflare Workers ಗಾಗಿ `renderToReadableStream`).
ಕೋಡ್ ಉದಾಹರಣೆ: ಹಂತ-ಹಂತದ ಮಾರ್ಗದರ್ಶಿ
ಪೂರ್ಣ ಹರಿವನ್ನು ಪ್ರದರ್ಶಿಸಲು Express.js ಅನ್ನು ಬಳಸಿಕೊಂಡು ಸರಳ ಉದಾಹರಣೆಯನ್ನು ನಿರ್ಮಿಸೋಣ.
ನಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ರಚನೆ:
- `
` ಮತ್ತು ` ` ವಿಷಯ ಪ್ರದೇಶವನ್ನು ಒಳಗೊಂಡಿರುವ `App` ಕಾಂಪೊನೆಂಟ್. - ತಕ್ಷಣವೇ ಲಭ್ಯವಿರುವ `
` ಕಾಂಪೊನೆಂಟ್. - ನಾವು ಕೋಡ್-ವಿಭಜನೆ ಮತ್ತು ಅಮಾನತುಗೊಳಿಸುವ ನಿಧಾನ `
` ಕಾಂಪೊನೆಂಟ್.
ಹಂತ 1: ಸರ್ವರ್ (`server.js`)
ಇಲ್ಲಿ, ನಾವು HTML ಅನ್ನು ತುಣುಕುಗಳಲ್ಲಿ ಕಳುಹಿಸಲು `renderToPipeableStream` ಅನ್ನು ಬಳಸುತ್ತೇವೆ.
```jsx // server.js import express from 'express'; import fs from 'fs'; import path from 'path'; import React from 'react'; import ReactDOMServer from 'react-dom/server'; import App from './src/App'; const app = express(); app.use('^/$', (req, res, next) => { const { pipe } = ReactDOMServer.renderToPipeableStream(, { bootstrapScripts: ['/main.js'], onShellReady() { res.setHeader('content-type', 'text/html'); pipe(res); } } ); }); app.use(express.static(path.resolve(__dirname, 'build'))); app.listen(3000, () => { console.log('Server is listening on port 3000'); }); ``` ಹಂತ 2: ಮುಖ್ಯ ಅಪ್ಲಿಕೇಶನ್ ಕಾಂಪೊನೆಂಟ್ (`src/App.js`)
ನಾವು `CommentsSection` ಅನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಆಮದು ಮಾಡಿಕೊಳ್ಳಲು `React.lazy` ಅನ್ನು ಬಳಸುತ್ತೇವೆ ಮತ್ತು ಅದನ್ನು `
```jsx // src/App.js import React, { Suspense } from 'react'; const CommentsSection = React.lazy(() => import('./CommentsSection')); const Spinner = () =>` ನಲ್ಲಿ ಸುತ್ತುವರಿಯುತ್ತೇವೆ. Loading comments...
; function App() { return (); } export default App; ```My Awesome Blog Post
This is the main content. It loads instantly and is interactive right away.
}> ಹಂತ 3: ನಿಧಾನವಾದ ಕಾಂಪೊನೆಂಟ್ (`src/CommentsSection.js`)
ನಿಧಾನವಾದ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಸಿಮ್ಯುಲೇಟ್ ಮಾಡಲು, ನಾವು ಪ್ರಾಮಿಸ್ ಅನ್ನು ಸುತ್ತುವರಿಯುವ ಸರಳ ಉಪಯುಕ್ತತೆಯನ್ನು ರಚಿಸಬಹುದು, ಅದು ಅದರ ರೆಸಲ್ಯೂಶನ್ ಅನ್ನು ವಿಳಂಬಗೊಳಿಸುತ್ತದೆ. ನಿಜ ಜೀವನದ ಸನ್ನಿವೇಶದಲ್ಲಿ, ಈ ವಿಳಂಬವು ಸಂಕೀರ್ಣ ಲೆಕ್ಕಾಚಾರಗಳು, ದೊಡ್ಡ ಕೋಡ್ ಬಂಡಲ್ ಅಥವಾ ಡೇಟಾ ಫೆಚಿಂಗ್‌ನಿಂದ ಉಂಟಾಗಬಹುದು.
```jsx // ನೆಟ್‌ವರ್ಕ್ ವಿಳಂಬವನ್ನು ಸಿಮ್ಯುಲೇಟ್ ಮಾಡಲು ಒಂದು ಉಪಯುಕ್ತತೆ function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } // src/CommentsSection.js import React from 'react'; // ನಿಧಾನ ಮಾಡ್ಯೂಲ್ ಲೋಡ್ ಅನ್ನು ಸಿಮ್ಯುಲೇಟ್ ಮಾಡಿ await delay(3000); function CommentsSection() { return (); } export default CommentsSection; ```Comments
- Great post!
- Very informative, thank you.
(ಗಮನಿಸಿ: ಟಾಪ್-ಲೆವೆಲ್ `await` ಗಾಗಿ ಆಧುನಿಕ ಬಂಡಲರ್ ಸೆಟಪ್ ಅಗತ್ಯವಿದೆ.)
ರನ್‌ಟೈಮ್ ಸಮಯದಲ್ಲಿ ಏನಾಗುತ್ತದೆ?
- ಅಭ್ಯರ್ಥನೆ: ಬಳಕೆದಾರರು ಪುಟವನ್ನು ಕೋರುತ್ತಾರೆ.
- ಆರಂಭಿಕ ಸ್ಟ್ರೀಮ್: Node.js ಸರ್ವರ್ ರೆಂಡರಿಂಗ್ ಪ್ರಾರಂಭಿಸುತ್ತದೆ. ಇದು `nav`, `h1`, `p`, ಮತ್ತು `button` ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ. `CommentsSection` ಗಾಗಿ `
` ಗಡಿರೇಖೆಯನ್ನು ತಲುಪಿದಾಗ, ಅದು ಕಾಯುವುದಿಲ್ಲ. ಇದು ಫಾಲ್‌ಬ್ಯಾಕ್ HTML (` Loading comments...
`) ಅನ್ನು ಕಳುಹಿಸುತ್ತದೆ ಮತ್ತು ಮುಂದುವರಿಯುತ್ತದೆ. ಆರಂಭಿಕ HTML ತುಣುಕನ್ನು ಬ್ರೌಸರ್‌ಗೆ ಕಳುಹಿಸಲಾಗುತ್ತದೆ. - ವೇಗದ FCP: ಬ್ರೌಸರ್ ಈ ಆರಂಭಿಕ HTML ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ. ಬಳಕೆದಾರರು ತಕ್ಷಣವೇ ನ್ಯಾವಿಗೇಶನ್ ಬಾರ್ ಮತ್ತು ಮುಖ್ಯ ಪೋಸ್ಟ್ ವಿಷಯವನ್ನು ನೋಡುತ್ತಾರೆ. ಕಾಮೆಂಟ್ ವಿಭಾಗವು ಲೋಡಿಂಗ್ ಸಂದೇಶವನ್ನು ತೋರಿಸುತ್ತದೆ.
- ಕ್ಲೈಂಟ್ JS ಲೋಡ್ ಆಗುತ್ತದೆ: `main.js` ಬಂಡಲ್ ಡೌನ್‌ಲೋಡ್ ಆಗಲು ಪ್ರಾರಂಭಿಸುತ್ತದೆ.
- ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ: `main.js` ಬಂದ ತಕ್ಷಣ, ರಿಯಾಕ್ಟ್ ಪುಟವನ್ನು ಹೈಡ್ರೇಟ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. ಇದು `nav` ಮತ್ತು `button` ಗೆ ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳನ್ನು ಲಗತ್ತಿಸುತ್ತದೆ. ಬಳಕೆದಾರರು ಈಗ "Click Me" ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಬಹುದು ಮತ್ತು ಕಾಮೆಂಟ್‌ಗಳು ಇನ್ನೂ "ಲೋಡ್ ಆಗುತ್ತಿದ್ದರೂ" ಸಹ ಎಚ್ಚರಿಕೆಯನ್ನು ನೋಡಬಹುದು.
- ಲೇಜಿ ಕಾಂಪೊನೆಂಟ್ ಬರುತ್ತದೆ: ಹಿನ್ನೆಲೆಯಲ್ಲಿ, ಬ್ರೌಸರ್ `CommentsSection.js` ಗಾಗಿ ಕೋಡ್ ಅನ್ನು ಫೆಚ್ ಮಾಡುತ್ತದೆ. ನಾವು ಸಿಮ್ಯುಲೇಟ್ ಮಾಡಿದ 3-ಸೆಕೆಂಡು ವಿಳಂಬ ಸಂಭವಿಸುತ್ತದೆ.
- ಅಂತಿಮ ಸ್ಟ್ರೀಮ್ ಮತ್ತು ಹೈಡ್ರೇಷನ್: `CommentsSection.js` ಲೋಡ್ ಆದ ನಂತರ, ರಿಯಾಕ್ಟ್ ಅದನ್ನು ಹೈಡ್ರೇಟ್ ಮಾಡುತ್ತದೆ, ಸ್ಪಿನರ್ ಅನ್ನು ನಿಜವಾದ ಕಾಮೆಂಟ್‌ಗಳ ಪಟ್ಟಿ ಮತ್ತು ಇನ್‌ಪುಟ್ ಕ್ಷೇತ್ರದೊಂದಿಗೆ ಮನಬಂದಂತೆ ಬದಲಾಯಿಸುತ್ತದೆ. ಇದು ಬಳಕೆದಾರರನ್ನು ಅಡ್ಡಿಪಡಿಸದೆ ಅಥವಾ ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸದೆ ಸಂಭವಿಸುತ್ತದೆ.
ಈ ಕಣ, ಆದ್ಯತೆಯ ಪ್ರಕ್ರಿಯೆಯು ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್‌ನ ಸಾರವಾಗಿದೆ.
ಪ್ರಭಾವದ ವಿಶ್ಲೇಷಣೆ: ಕಾರ್ಯಕ್ಷಮತೆ ಪ್ರಯೋಜನಗಳು ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವದ ಗೆಲುವುಗಳು
ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್ ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು ಕೇವಲ ಇತ್ತೀಚಿನ ಪ್ರವೃತ್ತಿಯನ್ನು ಅನುಸರಿಸುವುದಲ್ಲ; ಇದು ನಿಮ್ಮ ಬಳಕೆದಾರರಿಗೆ ಸ್ಪಷ್ಟವಾದ ಸುಧಾರಣೆಗಳನ್ನು ಒದಗಿಸುವುದಾಗಿದೆ.
ಸುಧಾರಿತ ಪ್ರಮುಖ ವೆಬ್ ವೈಟಲ್ಸ್
- ಟೈಮ್ ಟು ಇಂಟರಾಕ್ಟಿವ್ (TTI): ಇದು ಅತ್ಯಂತ ಗಮನಾರ್ಹ ಸುಧಾರಣೆಯನ್ನು ನೋಡುತ್ತದೆ. ಪುಟದ ಭಾಗಗಳು ಹೈಡ್ರೇಟ್ ಆಗುತ್ತಿದ್ದಂತೆ ಇಂಟರಾಕ್ಟಿವ್ ಆಗುವುದರಿಂದ, TTI ಅನ್ನು ನಿಧಾನವಾದ ಕಾಂಪೊನೆಂಟ್‌ನಿಂದ ನಿರ್ದೇಶಿಸಲಾಗುವುದಿಲ್ಲ. ಗೋಚರಿಸುವ, ಉನ್ನತ-ಆದ್ಯತೆಯ ವಿಷಯಕ್ಕಾಗಿ TTI ಅನ್ನು ಬಹಳ ಬೇಗನೆ ತಲುಪಲಾಗುತ್ತದೆ.
- ಫಸ್ಟ್ ಇನ್‌ಪುಟ್ ಡಿಲೇ (FID) / ಇಂಟರಾಕ್ಷನ್ ಟು ನೆಕ್ಸ್ಟ್ ಪೇಂಟ್ (INP): ಈ ಅಳತೆಗಳು ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಅಳೆಯುತ್ತವೆ. ಕಂಕರಂಟ್ ರೆಂಡರಿಂಗ್ ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಹೈಡ್ರೇಷನ್ ಅನ್ನು ಅಡ್ಡಿಪಡಿಸುವುದರಿಂದ, ಬಳಕೆದಾರರ ಕ್ರಿಯೆ ಮತ್ತು UI ಯ ಪ್ರತಿಕ್ರಿಯೆಯ ನಡುವಿನ ವಿಳಂಬವು ಕಡಿಮೆಯಾಗುತ್ತದೆ. ಪುಟವು ಪ್ರಾರಂಭದಿಂದಲೂ ವೇಗವಾಗಿ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಿಸುವಂತೆ ಅನಿಸುತ್ತದೆ.
ಹೆಚ್ಚಿದ ಬಳಕೆದಾರರ ಅನುಭವ
ತಾಂತ್ರಿಕ ಅಳತೆಗಳು ನೇರವಾಗಿ ಉತ್ತಮ ಬಳಕೆದಾರ ಪ್ರಯಾಣಕ್ಕೆ ಅನುವಾದಿಸುತ್ತವೆ. SSR "ಅನ್ಕ್ಯಾನಿ ವ್ಯಾಲಿ" ಅನ್ನು ತೆಗೆದುಹಾಕುವುದು ಒಂದು ದೊಡ್ಡ ಗೆಲುವು. ಬಳಕೆದಾರರು ಒಂದು ಅಂಶವನ್ನು ನೋಡಿದರೆ, ಅವರು ಅದರೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಬಹುದು ಎಂದು ಅವರು ನಂಬಬಹುದು. ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ, ನಿಧಾನವಾದ ನೆಟ್‌ವರ್ಕ್‌ಗಳಲ್ಲಿ, ಇದು ರೂಪಾಂತರಕಾರಿಯಾಗಿದೆ. ಅವರು ಸೈಟ್ ಅನ್ನು ಬಳಸುವ ಮೊದಲು ಬಹು-ಮೆಗಾಬೈಟ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಂಡಲ್ ಅನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು ಅವರು ಇನ್ನು ಮುಂದೆ ಕಾಯಬೇಕಾಗಿಲ್ಲ. ಅವರು ತುಣುಕುಗಳಾಗಿ ಕ್ರಿಯಾತ್ಮಕ, ಇಂಟರಾಕ್ಟಿವ್ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ಪಡೆಯುತ್ತಾರೆ, ಇದು ಹೆಚ್ಚು ಸುಲಲಿತ ಮತ್ತು ತೃಪ್ತಿದಾಯಕ ಅನುಭವವಾಗಿದೆ.
ಕಾರ್ಯಕ್ಷಮತೆಯ ಜಾಗತಿಕ ದೃಷ್ಟಿಕೋನ
ಜಾಗತಿಕ ಗ್ರಾಹಕರ ನೆಲೆಯನ್ನು ಹೊಂದಿರುವ ಕಂಪನಿಗೆ, ನೆಟ್‌ವರ್ಕ್ ವೇಗಗಳು ಮತ್ತು ಸಾಧನ ಸಾಮರ್ಥ್ಯಗಳ ವೈವಿಧ್ಯತೆಯು ಒಂದು ಪ್ರಮುಖ ಸವಾಲಾಗಿದೆ. ಸಿಯೋಲ್‌ನಲ್ಲಿ ಉನ್ನತ-ಮಟ್ಟದ ಸ್ಮಾರ್ಟ್‌ಫೋನ್‌ನೊಂದಿಗೆ 5G ಸಂಪರ್ಕದಲ್ಲಿರುವ ಬಳಕೆದಾರರು ಗ್ರಾಮೀಣ ಪ್ರದೇಶದಲ್ಲಿ ಬಜೆಟ್ ಸಾಧನದೊಂದಿಗೆ 3G ಸಂಪರ್ಕದಲ್ಲಿರುವ ಬಳಕೆದಾರರಿಗಿಂತ ವಿಭಿನ್ನ ಅನುಭವವನ್ನು ಹೊಂದಿರುತ್ತಾರೆ. ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್ ಈ ಅಂತರವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. HTML ಅನ್ನು ಸ್ಟ್ರೀಮಿಂಗ್ ಮಾಡುವ ಮೂಲಕ ಮತ್ತು ಆಯ್ಕೆಯಾಗಿ ಹೈಡ್ರೇಟ್ ಮಾಡುವ ಮೂಲಕ, ನೀವು ನಿಧಾನ ಸಂಪರ್ಕದಲ್ಲಿರುವ ಬಳಕೆದಾರರಿಗೆ ಬಹಳ ಬೇಗನೆ ಮೌಲ್ಯವನ್ನು ತಲುಪಿಸುತ್ತೀರಿ. ಅವರು ನಿರ್ಣಾಯಕ ವಿಷಯ ಮತ್ತು ಮೂಲಭೂತ ಇಂಟರಾಕ್ಟಿವಿಟಿಯನ್ನು ಮೊದಲು ಪಡೆಯುತ್ತಾರೆ, ಆದರೆ ಭಾರವಾದ ಘಟಕಗಳು ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಲೋಡ್ ಆಗುತ್ತವೆ. ಈ ವಿಧಾನವು ಎಲ್ಲರಿಗೂ, ಎಲ್ಲೆಡೆಗೂ ಹೆಚ್ಚು ಸಮಾನ ಮತ್ತು ಪ್ರವೇಶಿಸಬಹುದಾದ ವೆಬ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ.
ಸಾಮಾನ್ಯ ಅಡಚಣೆಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್‌ನಿಂದ ಗರಿಷ್ಠ ಲಾಭ ಪಡೆಯಲು, ಈ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸಿ:
ಹೈಡ್ರೇಷನ್ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸುವುದು
ಯಾವ ಘಟಕಗಳು ರೆಂಡರ್ ಮಾಡಲು ಮತ್ತು ಹೈಡ್ರೇಟ್ ಮಾಡಲು ಹೆಚ್ಚು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತವೆ ಎಂಬುದನ್ನು ಗುರುತಿಸಲು ರಿಯಾಕ್ಟ್ ಡೆವ್ಟೂಲ್ಸ್ ಪ್ರೊಫೈಲರ್ ಬಳಸಿ. ಕ್ಲೈಂಟ್‌ನಲ್ಲಿ ಗಣನೀಯವಾಗಿ ದುಬಾರಿಯಾಗಿರುವ, ದೊಡ್ಡ ಡಿಪೆಂಡೆನ್ಸಿ ಟ್ರೀಗಳನ್ನು ಹೊಂದಿರುವ, ಅಥವಾ ಭಾರವಾದ ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಪ್ರಾರಂಭಿಸುವ ಘಟಕಗಳಿಗಾಗಿ ನೋಡಿ. ಇವುಗಳನ್ನು `
` ನಲ್ಲಿ ಸುತ್ತುವರಿಯಲು ಪ್ರಮುಖ ಅಭ್ಯರ್ಥಿಗಳಾಗಿವೆ. `
` ನ ಕಾರ್ಯತಂತ್ರದ ಬಳಕೆ ಪ್ರತಿ ಒಂದೇ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು `
` ನಲ್ಲಿ ಸುತ್ತುವರಿಯಬೇಡಿ. ಇದು ತುಂಡಾದ ಲೋಡಿಂಗ್ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು. ಕಾರ್ಯತಂತ್ರವಾಗಿರಿ. ಅಮಾನತುಗೊಳಿಸುವಿಕೆಗೆ ಉತ್ತಮ ಅಭ್ಯರ್ಥಿಗಳು ಸೇರಿವೆ: - ಬೆಲೋ-ದಿ-ಫೋಲ್ಡ್ ವಿಷಯ: ಬಳಕೆದಾರರು ಆರಂಭದಲ್ಲಿ ನೋಡದ ಏನೂ.
- ನಿರ್ಣಾಯಕವಲ್ಲದ ವಿಜೆಟ್‌ಗಳು: ಚಾಟ್‌ಬಾಟ್‌ಗಳು, ವಿವರವಾದ ವಿಶ್ಲೇಷಣೆ ಚಾರ್ಟ್‌ಗಳು, ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಫೀಡ್‌ಗಳು.
- ಬಳಕೆದಾರ ಸಂವಹನವನ್ನು ಆಧರಿಸಿದ ಘಟಕಗಳು: ಡಿಫಾಲ್ಟ್ ಆಗಿ ಗೋಚರಿಸದ ಮೋಡಲ್ ಅಥವಾ ಟ್ಯಾಬ್ ಒಳಗೆ ವಿಷಯ.
- ಭಾರವಾದ ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಲೈಬ್ರರಿಗಳು: ಇಂಟರಾಕ್ಟಿವ್ ನಕ್ಷೆಗಳು ಅಥವಾ ಸಂಕೀರ್ಣ ಡೇಟಾ ದೃಶ್ಯೀಕರಣ ಘಟಕಗಳು.
ಡೇಟಾ ಫೆಚಿಂಗ್ ಪರಿಗಣನೆಗಳು
ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್ ಸಸ್ಪೆನ್ಸ್-ಸಕ್ರಿಯಗೊಳಿಸಿದ ಡೇಟಾ ಫೆಚಿಂಗ್‌ನೊಂದಿಗೆ ಕೈಜೋಡಿಸಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ರಿಯಾಕ್ಟ್ ನಿರ್ದಿಷ್ಟ ಡೇಟಾ-ಫೆಚಿಂಗ್ ಪರಿಹಾರದೊಂದಿಗೆ ಬರದಿದ್ದರೂ, ರಿಲೇಯಂತಹ ಲೈಬ್ರರಿಗಳು ಮತ್ತು Next.js ನಂತಹ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳು ಅಂತರ್ನಿರ್ಮಿತ ಬೆಂಬಲವನ್ನು ಹೊಂದಿವೆ. ನೀವು ಪ್ರಾಮಿಸ್ ಅನ್ನು ಎಸೆಯುವ ಕಸ್ಟಮ್ ಹೂಕ್ಸ್ ಅನ್ನು ಸಹ ನಿರ್ಮಿಸಬಹುದು, ಇದು ನಿಮ್ಮ ಘಟಕಗಳು ಆರಂಭಿಕ ಸ್ಟ್ರೀಮ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸದೆ ಸರ್ವರ್‌ನಲ್ಲಿ ಡೇಟಾಕ್ಕಾಗಿ ಕಾಯಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
SEO ಪರಿಣಾಮಗಳು
ಸುಧಾರಿತ ರೆಂಡರಿಂಗ್ ತಂತ್ರಗಳೊಂದಿಗೆ ಸಾಮಾನ್ಯ ಕಾಳಜಿಯು SEO ಆಗಿದೆ. ಅದೃಷ್ಟವಶಾತ್, ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್ SEO ಗೆ ಅತ್ಯುತ್ತಮವಾಗಿದೆ. ಆರಂಭಿಕ HTML ಇನ್ನೂ ಸರ್ವರ್‌ನಲ್ಲಿ ರೆಂಡರ್ ಆಗಿರುವುದರಿಂದ, ಸರ್ಚ್ ಎಂಜಿನ್ ಕ್ರಾಲರ್‌ಗಳು ತಕ್ಷಣವೇ ಅರ್ಥಪೂರ್ಣ ವಿಷಯವನ್ನು ಸ್ವೀಕರಿಸುತ್ತವೆ. Googlebot ನಂತಹ ಆಧುನಿಕ ಕ್ರಾಲರ್‌ಗಳು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಸಹ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಬಹುದು ಮತ್ತು ನಂತರ ಸ್ಟ್ರೀಮ್ ಆಗುವ ವಿಷಯವನ್ನು ನೋಡುತ್ತವೆ. ಫಲಿತಾಂಶವು ವೇಗದ, ಇಂಡೆಕ್ಸೆಬಲ್ ಪುಟವಾಗಿದ್ದು, ಬಳಕೆದಾರರಿಗೆ ಹೆಚ್ಚು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನೀಡುತ್ತದೆ - ಒಂದು ಗೆಲುವು-ಗೆಲುವು.
ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ರೆಂಡರಿಂಗ್‌ನ ಭವಿಷ್ಯ: ಸರ್ವರ್ ಕಾಂಪೊನೆಂಟ್ಸ್
ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್ ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಮುಂದಿನ ಪ್ರಮುಖ ವಿಕಸನಕ್ಕೆ ದಾರಿ: ರಿಯಾಕ್ಟ್ ಸರ್ವರ್ ಕಾಂಪೊನೆಂಟ್ಸ್ (RSC).
ಸರ್ವರ್ ಕಾಂಪೊನೆಂಟ್ಸ್ ಸರ್ವರ್‌ನಲ್ಲಿ ಪ್ರತ್ಯೇಕವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಹೊಸ ರೀತಿಯ ಕಾಂಪೊನೆಂಟ್ ಆಗಿದೆ. ಅವುಗಳಿಗೆ ಯಾವುದೇ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೂಟ್‌ಪ್ರಿಂಟ್ ಇಲ್ಲ, ಅಂದರೆ ಅವು ನಿಮ್ಮ ಬಂಡಲ್ ಗಾತ್ರಕ್ಕೆ ಸೊನ್ನೆ ಕಿಲೋಬೈಟ್‌ಗಳನ್ನು ಕೊಡುಗೆ ನೀಡುತ್ತವೆ. ಸ್ಥಿರ ವಿಷಯವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಅಥವಾ ಡೇಟಾಬೇಸ್‌ನಿಂದ ನೇರವಾಗಿ ಡೇಟಾವನ್ನು ಫೆಚ್ ಮಾಡಲು ಅವು ಸೂಕ್ತವಾಗಿವೆ.
ಭವಿಷ್ಯದ ದೃಷ್ಟಿಯು ವಾಸ್ತುಶಿಲ್ಪಗಳ ಮನಬಂದಂತೆ ಮಿಶ್ರಣವಾಗಿದೆ:
- ಸರ್ವರ್ ಕಾಂಪೊನೆಂಟ್ಸ್ ಸ್ಥಿರ ವಿಷಯ ಮತ್ತು ಡೇಟಾ ಪ್ರವೇಶಕ್ಕಾಗಿ.
- ಕ್ಲೈಂಟ್ ಕಾಂಪೊನೆಂಟ್ಸ್ (ನಾವು ಇಂದು ಬಳಸುವ ಕಾಂಪೊನೆಂಟ್ಸ್) ಇಂಟರಾಕ್ಟಿವಿಟಿಗಾಗಿ.
- ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್ ಬಳಕೆದಾರರನ್ನು ನಿರ್ಬಂಧಿಸದೆ ಪುಟದ ಇಂಟರಾಕ್ಟಿವ್ ಭಾಗಗಳನ್ನು ಜೀವಂತಗೊಳಿಸುವ ಸೇತುವೆಯಾಗಿ.
ಈ ಸಂಯೋಜನೆಯು ಎಲ್ಲ ಪ್ರಪಂಚಗಳ ಅತ್ಯುತ್ತಮವಾದದ್ದನ್ನು ತಲುಪಿಸುವ ಭರವಸೆ ನೀಡುತ್ತದೆ: ಸರ್ವರ್-ರೆಂಡರ್ಡ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಸರಳತೆ, ಕ್ಲೈಂಟ್-ಸೈಡ್ SPA ಯ ಶ್ರೀಮಂತ ಇಂಟರಾಕ್ಟಿವಿಟಿಯೊಂದಿಗೆ.
ತೀರ್ಮಾನ: ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನಲ್ಲಿ ಒಂದು ಪ್ಯಾರಾಡಿಗ್ಮ್ ಶಿಫ್ಟ್
ರಿಯಾಕ್ಟ್ ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್ ಕೇವಲ ಒಂದು ಪ್ರಗತಿಪರ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸುಧಾರಣೆಗಿಂತ ಹೆಚ್ಚು. ಇದು ನಾವು ವೆಬ್‌ಗಾಗಿ ನಿರ್ಮಿಸುವ ರೀತಿಯಲ್ಲಿ ಒಂದು ಮೂಲಭೂತ ಪ್ಯಾರಾಡಿಗ್ಮ್ ಶಿಫ್ಟ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಮೊನೊಲಿಥಿಕ್, ಆಲ್-ಆರ್-ನಥಿಂಗ್ ಮಾದರಿಯಿಂದ ದೂರ ಸರಿಯುವ ಮೂಲಕ, ನಾವು ಈಗ ಹೆಚ್ಚು ಕಣ, ಸ್ಥಿತಿಸ್ಥಾಪಕ ಮತ್ತು ಬಳಕೆದಾರರ ನಿಜವಾದ ಸಂವಹನಗಳ ಸುತ್ತ ಕೇಂದ್ರೀಕರಿಸಿದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು.
ಇದು ಮುಖ್ಯವಾದುದಕ್ಕೆ ಆದ್ಯತೆ ನೀಡಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಕಷ್ಟಕರವಾದ ನೆಟ್‌ವರ್ಕ್ ಪರಿಸ್ಥಿತಿಗಳಲ್ಲೂ ಸಹ ಬಳಕೆಯೋಗ್ಯ ಮತ್ತು ಸಂತೋಷಕರ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ. ಇದು ವೆಬ್‌ಪುಟದ ಎಲ್ಲಾ ಭಾಗಗಳು ಸಮಾನವಾಗಿ ರಚನೆಯಾಗಿಲ್ಲ ಎಂದು ಒಪ್ಪಿಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಲೋಡಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ನಿಖರತೆಯೊಂದಿಗೆ ಆರ್ಕೆಸ್ಟ್ರಾಟ್ ಮಾಡಲು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಉಪಕರಣಗಳನ್ನು ನೀಡುತ್ತದೆ.
ದೊಡ್ಡ-ಪ್ರಮಾಣದ, ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುವ ಯಾವುದೇ ಡೆವಲಪರ್‌ಗೆ, ರಿಯಾಕ್ಟ್ 18 ಗೆ ಅಪ್‌ಗ್ರೇಡ್ ಮಾಡುವುದು ಮತ್ತು ಸೆಲೆಕ್ಟಿವ್ ಹೈಡ್ರೇಷನ್ ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು ಇನ್ನು ಮುಂದೆ ಐಚ್ಛಿಕವಲ್ಲ - ಇದು ಅತ್ಯಗತ್ಯ. ಇಂದು `Suspense` ಮತ್ತು ಸ್ಟ್ರೀಮಿಂಗ್ SSR ನೊಂದಿಗೆ ಪ್ರಯೋಗಿಸಲು ಪ್ರಾರಂಭಿಸಿ. ನಿಮ್ಮ ಬಳಕೆದಾರರು, ಅವರು ಪ್ರಪಂಚದಲ್ಲಿ ಎಲ್ಲೇ ಇರಲಿ, ವೇಗವಾದ, ಸುಲಲಿತ ಮತ್ತು ಹೆಚ್ಚು ಪ್ರತಿಕ್ರಿಯಿಸುವ ಅನುಭವಕ್ಕಾಗಿ ನಿಮಗೆ ಧನ್ಯವಾದಗಳು.